<template>
  <!-- 纵向柱状图 -->
  <!-- style="width: 100%; height: 100%" -->
  <div style="width: 100%; height: 100%">
    <div ref="oneLeft" class="multiBeam" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Portait',
  props: {
    /** 底边栏数组 */
    // eslint-disable-next-line vue/require-default-prop
    chartData: {
      type: Array,
      require: true
    },
    /** 柱状图长度 */
    // eslint-disable-next-line vue/require-default-prop
    lengthData: {
      type: Array,
      require: true
    },
    /** 内框默认颜色 */
    color: {
      type: String,
      default: '#4284ce'
    },
    /** 柱子默认宽度 */
    barWidth: {
      type: String,
      default: '20%'
    },
    /** 是否显示拖动条 */
    dataZoomShow: {
      type: Boolean,
      default: false
    },
    /** 拖动条结束长度 */
    endnum: {
      type: Number,
      default: 90
    },
    /** 柱状图右边距 */
    right: {
      type: String,
      default: '4%'
    },
    /** 柱状图下边距 */
    bottom: {
      type: String,
      default: '10%'
    },
    fontSize: {
      type: String,
      default: '18'
    },
    /** 是否鼠标移上去时显示百分比 */
    percentage: {
      type: Boolean,
      default: false
    },
    /** 是否显示柱状图每根柱子上的数据 */
    countshow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      // 柱状图配置项
      scoreOption: {}
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.onResize)
    window.onresize = null
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      this.chart = echarts.init(this.$refs.oneLeft)
      this.scoreOption = this.options || {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: this.percentage
            ? a => {
                const allcoount = this.lengthData.reduce((prev, curr) => {
                  return prev + curr
                })
                console.log('a', a)
                // return a.value.toLocaleString() + '%'
                return a[0].axisValue + '：' + '    ' + parseInt(allcoount / a[0].value) + '%'
              }
            : ''
          // label: {
          //   normal: {
          //     color: '#000',
          //     show: true,
          //     position: 'top'
          //   }
          // }
        },
        grid: {
          left: '0%',
          right: this.right,
          bottom: this.bottom,
          top: '10%',
          containLabel: true
        },
        xAxis: {
          data: this.chartData,
          type: 'category',
          axisLabel: {
            // color: '#96A4F4'
            interval: 0,
            // rotate: 0,
            textStyle: {
              color: '#666666',
              fontFamily: 'MicrosoftYaHei',
              fontSize: this.fontSize,
              lineHeight: '25'
            }
          },
          // nameGape: 80,
          axisLine: {
            lineStyle: {
              color: '#999999'
            },
            width: 5
          },
          axisTick: true // 隐藏刻度代码
        },
        yAxis: {
          type: 'value',
          // max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          }
        },
        dataZoom: [
          // {
          //   show: this.dataZoomShow,
          //   height: 12,
          //   xAxisIndex: [0],
          //   bottom: '2%',
          //   start: 10,
          //   end: 120,
          //   // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          //   handleSize: '100%',
          //   handleStyle: {
          //     color: '#ccc'
          //   },
          //   textStyle: {
          //     color: 'rgba(0,0,0,0)'
          //   },
          //   borderColor: '#ccc'
          // },
          // {
          //   type: 'inside',
          //   show: this.dataZoomShow,
          //   height: 15,
          //   start: 0,
          //   end: this.endnum
          // },
          {
            show: this.dataZoomShow,
            height: 12,
            start: 0,
            end: this.endnum,
            xAxisIndex: [0],
            handleSize: 0, // 滑动条的 左右2个滑动条的大小
            left: '5%', // 左边的距离
            right: '5%', // 右边的距离
            bottom: 0, // 右边的距离
            borderColor: 'none',
            fillerColor: 'rgb(229,229,229)',
            borderRadius: 5,
            backgroundColor: 'rgba(229, 229, 229, .36)', // 两边未选中的滑动条区域的颜色
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            textStyle: {
              fontSize: 0
            },
            // endValue: , // 从0开始的相当于5个
            borderWidth: 0,
            handleStyle: {
              color: '#d3dee5'
            }
          }
        ],
        series: [
          {
            data: this.lengthData,
            type: 'bar',
            barWidth: this.barWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.color
                  },
                  {
                    offset: 1,
                    color: this.color
                  }
                ]),
                barBorderRadius: 2
              }
            },
            label: {
              normal: {
                color: this.countshow ? '#000' : '#fff',
                show: true,
                position: 'top'
              }
            }
          }
        ]
      }
      this.chart.setOption(this.scoreOption)
      window.addEventListener('resize', this.onResize)
    },
    onResize() {
      this.chart.resize()
    }
  }
}
</script>
<style scoped>
.multiBeam {
  width: 100%;
  height: 100%;
}
</style>
